<template>
	<view class="mallIndex">
		<view class="searchBox" :class="isChange?'active bg-line-color':''">
			<uv-search placeholder="请输入搜索内容" v-model="keyword" @search="searchHeadler"></uv-search>
		</view>
		<uni-swiper-dot :info="viewData" :current="current" field="content" :mode="mode">
			<swiper class="swiper-box">
				<swiper-item v-for="(item ,index) in viewData" :key="index" @click="goToBanner(item)">
					<view class="swiper-item">
						<image :src="`${item.logo.includes('https')?item.logo:(uniConfig.ssoPath + item.logo)}`"/>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="cateShow">
			<view v-for="(item,index) in cateList" :key="index" @click="changeNum(item.id)" class="cateShow_item">
				<image :src="`${item.logo.includes('https')?item.logo:(uniConfig.ssoPath + item.logo)}`" mode="widthFix"/>
				<view>{{item.name}}</view>
			</view>
		</view>
		<view class="pList_title">热门推荐</view>
		<view v-for="(item,index) in productList" :key="index" class="pList" @click="getDetail(item.id)">
			<view class="pList_left" ><image :src="`${uniConfig.ssoPath + item.logo}`" /></view>
			<view class="pList_right">
				<view>{{item.name}}</view>
				<view class="pList_text">￥{{item.price}}</view>
			</view>
		</view>
		<view class="lastchild"></view>
		<Tabbar index="2"/>
	</view>
</template>

<script setup lang="ts">
const app = getApp()
import Tabbar from '@/components/tabbar'
import { ref } from 'vue'
import { getBanner,getProductList,getCategory } from "@/api/product"
import { onLoad , onPageScroll} from "@dcloudio/uni-app"
import { uniConfig } from '@/config/index'
const keyword = ref<any>('')
const viewData = ref<any>([])
const productList = ref<any>([])
const current= 0
const mode = 'round' 
const cateList = ref<any>([])
const searchHeadler = (e : any) => {
	uni.navigateTo({
		url: `/pages/mall/search?keyword=${e}`
	})
}
const goToBanner = (item : any) => {
	if(item.url && item.url.includes('https')){
		uni.navigateTo({
			url: `/pages/web/index?url=${item.url}`
		})
	}else if(item.url){
		uni.navigateTo({
			url: item.url
		})
	}else{
		uni.navigateTo({
			url: `/pages/mall/detail?productId=${item.id}`
		})
	}
}
const getDetail = (value:any) =>{
	uni.navigateTo({
		url: `/pages/mall/detail?productId=${value}`
	})
}
const changeNum = (value:any)=>{
	uni.navigateTo({
		url: `/pages/mall/category?categoryId=${value}`
	})
}
onLoad(async (options : any) => {
	getBanner(options).then(res=>{
		if(res.success){
			viewData.value = res.data
		}
	})
	getProductList().then(res=>{
		if(res.success){
			productList.value = res.data.records
		}
	})
	getCategory(options).then(res=>{
		if(res.success){
			let saveVal = res.data
			cateList.value = res.data
		}
	})
	
})
const isChange = ref<any>(false)
onPageScroll((e) => {
	if(e.scrollTop>10){
		isChange.value = true
	}else{
		isChange.value = false
	}
})
</script>

<style lang="scss">
	.mallIndex{
		width: 100%;
		height: 100%;
		flex: 1;
		padding-top: 12vh;
		box-sizing: border-box;
		.searchBox{
			padding:32rpx 28vw 32rpx 32rpx;
			position: fixed;
			width: 100%;
			left: 0;
			top: 0;
			box-sizing: border-box;
			height: 12vh;
			display: flex;
			align-items: flex-end;
			z-index: 9;
			&.active{
				background: #fff;
			}
			.uv-search{
				position: relative;
				.uv-search__action{
					position: absolute;
					right:24rpx;
				}
			}
		}
	}
	.pList{
		display: flex;
		width: 90%;
		margin: 32rpx auto 0;
		border-radius: 9px;
		overflow: hidden;
		background: #fff;
		box-shadow: 0 0px 12px rgba(0,0,0,.1);
		align-items: center;
	}
	.lastchild{
		margin-bottom:32rpx;
	}
	.pList_right{
		padding: 0rpx 32rpx;
	}
	.pList_left{
		display: flex;
	}
    .pList_left image{
		width: 200rpx;
		height: 200rpx;
		border-radius: 9px;
	}
	.pList_text{
		color: #d2553d;
		margin-top: 32rpx;
		font-weight: 600;
	} 
	.swiper-box{
		width:90%;
		margin-left:5%;
		height:400rpx;
		border-radius: 9px;
		overflow: hidden;
	}
	.swiper-item image{
	    width:100%;	
	}
	.cateShow{
		width: 90%;
		margin: 32rpx auto 0;
		border-radius: 9px;
		box-shadow: 0 0px 12px rgba(0,0,0,.1);
		background-color: #ffffff;
		display: flex;
		align-items: flex-end;
		text-align: center;
        white-space: nowrap;
        overflow-x: scroll;
		padding: 32rpx;
		box-sizing: border-box;
		.cateShow_item{
			margin-right: 32rpx;
		}
	}
	.cateShow image{
		border-radius:50%;
	    width:125rpx;
		height:125rpx;
		border:2px solid transparent;
		border-radius:50%;
	}
	.cateClick{
		border-radius:50%;
		border:2px solid rgb(245,238,182) !important;
		color:rgb(245,238,182);
	}
	.acColor{
		color:rgb(245,238,182);
	}
	.pList_title{
		padding:52rpx 32rpx 0;
		color:rgb(245,238,182);
		text-align: center;
		font-weight: 600;
		font-size: 42rpx;
	}
</style>